<template>
  <view class="fencting-content">
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map
          style="width: 100%; height: 100vh;box-sizing: border-box;"
          :latitude="latitude"
          :longitude="longitude"
          :markers="markers"
		  :enable-traffic="trafficEnabled"
		  :enable-satellite="satellite" 
		  :rotate="userHeading"
        >
          
		  
		  <cover-view class="conver-btn" style="bottom: 21%;left: 3%; ">
		  		<cover-image src="../../static/logo.png" style="" mode=""></cover-image>
		  		<cover-view style="">编辑</cover-view>
		  </cover-view>
		  <cover-view class="conver-btn" style="bottom: 15%; left: 3%;">
		  		<cover-image src="../../static/logo.png"  mode=""></cover-image>
		  				<cover-view style="">删除</cover-view>
		  </cover-view>
		  <cover-view class="conver-btn" style="bottom: 9%;left: 3%;">
		  		<cover-image src="../../static/logo.png" style="" mode=""></cover-image>
		  				<cover-view style="">目标</cover-view>
		  </cover-view>
		  <cover-view class="conver-btn" style="bottom: 3%;left: 3%; ">
		  		<cover-image src="../../static/logo.png" style="" mode=""></cover-image>
		  		<cover-view style="">围栏</cover-view>
		  </cover-view>
		  <cover-view class="conver-btn" style="bottom: 3%; right: 2%; ">
		  <cover-view class="" style="padding: 10rpx 0rpx;border-bottom: 1rpx solid #dedede;">
		  	+
		  </cover-view>
		  <cover-view class="" style="padding: 10rpx 0rpx;">
		  	-
		  </cover-view>
		  </cover-view>
		  <cover-view class="conver-btn" style="top: 2%; right: 1%;" @click="opensatellite" >
		  	<cover-image src="../../static/logo.png" style="" mode=""></cover-image>
		  	<cover-view style="">地图</cover-view>
		  
		  </cover-view>
        </map>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  trafficEnabled:false,
	  satellite:false,
      latitude: 39.908823, // 示例纬度
      longitude: 116.397470, // 示例经度
      markers: [
        // 你可以在这里添加其他标记点
      ],
    };
  },
  methods:{
	  opensatellite(){
		  console.log('000');
		  this.satellite=!this.satellite
	  },
	  opentraffic(){
		  console.log('000');
		  this.trafficEnabled=!this.trafficEnabled
	  }
  }
};
</script>

<style lang="scss" scoped>
	.conver-btn{
		padding: 10rpx 20rpx;
		// width: 75rpx; height: 75rpx;
		color: gray;
		box-sizing: border-box;
		background-color: white;
		position: absolute;
		border-radius: 10rpx;
		text-align: center;
		cover-image{
			height: 30rpx;width: 30rpx;margin: 0 auto;
		}
		cover-view{
			font-size: 22rpx;margin-top: 0;
		}
	}
.white-area {
  background-color: white;
  position: absolute; /* 必须设置为绝对定位 */
}
</style>